<template>
  <div class="window-back">

    <div class="report-title" >
      <span style="border-left:5px rgb(80,80,255) solid;padding-left: 10px;"> 修改社区信息</span>
    </div>
      <div class="ProfileHeader-main">


        <div class="ProfileHeader-content">
          <!--        用户名            -->
          <div class="ProfileHeader-contentHead">
            <h1 class="ProfileHeader-title">
              <!--          社区名 正常显示        -->
              <div v-bind:class="{ FullNameField_editable: SocietyIsActive }">
                <!--        社区名 当没有信息时的显示-->
                <div v-if="this.per_info.societyName === ''">
                  <button
                      type="button"
                      class="Edit-per-button"
                      @click="Editor('head')"
                  >
                    <svg
                        t="1626683447550"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="933"
                        width="200"
                        height="200"
                    >
                      <path
                          d="M912.423674 1024H22.590689a489.230175 489.230175 0 0 1 311.130103-455.461013 312.375869 312.375869 0 1 1 357.223452 0.222458A489.207929 489.207929 0 0 1 1001.406972 1024h-88.983298z m-176.053456-711.399225a223.859733 223.859733 0 1 0-223.859734 223.859733 223.859733 223.859733 0 0 0 223.815242-223.859733z m-197.342711 310.974382c-8.89833 0.734112-17.663185 1.334749-26.694989 1.334749-9.365492 0-18.597509-0.600637-27.740543-1.401487a401.003235 401.003235 0 0 0-364.364362 311.441545h782.007473a400.914251 400.914251 0 0 0-363.207579-311.374807z"
                          fill="#175199"
                          p-id="934"
                      ></path>
                    </svg>
                    点击设置社区名
                  </button>
                </div>
                <div v-else>
                  <span class="FullNameField-name">{{
                      this.per_info.societyName
                    }}</span>
                  <button
                      type="button"
                      class="Edit-per-button"
                      @click="Editor('head')"
                  >
                    <svg
                        t="1626594951058"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1609"
                        width="200"
                        height="200"
                    >
                      <path
                          d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z"
                          p-id="1610"
                          fill="#175199"
                      ></path>
                      <path
                          d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z"
                          p-id="1611"
                          fill="#175199"
                      ></path>
                      <path
                          d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z"
                          p-id="1612"
                          fill="#175199"
                      ></path>
                    </svg>
                    修改
                  </button>
                </div>
              </div>
              <!--             社区名 编辑模式           -->
              <div v-bind:class="{ FullNameField_edit: !SocietyIsActive }">
                <h3 class="NameField-label">社区名</h3>
                <div class="nameField-content">
                  <input
                      class="FieldName-input"
                      @input="InputStander('head')"
                      v-model="per_info.societyName"
                  />
                  <div class="">
                    <input
                        :disabled="this.isNameNull"
                        type="button"
                        value="保存"
                        class="button-save"
                        @click="saveName('head')"
                    />
                    <input
                        type="button"
                        value="取消"
                        class="button-cancel"
                        @click="cancel('head')"
                    />
                  </div>
                </div>
              </div>
            </h1>
          </div>

          <div class="ProfileEdit-fields">
            <!--      社区简介      -->
            <form class="Field">
              <!--       社区简介    正常显示        -->
              <div
                  class="Field-inline"
                  v-bind:class="{ Field_edit: SocietyIntroIsActive }"
              >
                <!--   社区简介   当没有信息时的显示     -->
                <div v-if="this.per_info.introduce === ''">
                  <h3 class="Field-label">社区简介</h3>
                  <button
                      type="button"
                      class="Edit-per-button First-edit"
                      @click="Editor('introduce')"
                  >
                    <svg
                        t="1626684853414"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4036"
                        width="200"
                        height="200"
                    >
                      <path
                          d="M226 295h-39c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h13v-0.242c18.242-7.924 31-26.101 31-47.258 0-0.254-0.002-0.507-0.005-0.76l0.002-0.238a47.984 47.984 0 0 0-1.955-13.116C222.905 147.805 203.048 132 179.5 132c-26.585 0-48.465 20.143-51.21 46H128v724h663V295H279v6-6h-53z m0.02-64h-0.003H855c26.51 0 48-21.49 48-48s-21.49-48-48-48H284.222a112.312 112.312 0 0 0-23.872-33C281.7 122.394 295 151.144 295 183c0 17.178-3.867 33.452-10.778 48H226.02zM848 960H64V164c0-55.228 44.772-100 100-100h684c61.856 0 112 50.144 112 112s-50.144 112-112 112v672zM232 397h451c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H232c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m0 161h451c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H232c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m0 161h451c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H232c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z"
                          p-id="4037"
                          fill="#175199"
                      ></path>
                    </svg>
                    点击社区介绍社区
                  </button>
                </div>
                <div v-else>
                  <h3 class="Field-label">社区简介</h3>
                  <div class="Field-content ">
                    <span class="Field-text">{{ per_info.introduce }}</span>
                    <button
                        type="button"
                        class="change-button"
                        @click="Editor('introduce')"
                    >
                      <svg
                          t="1626594951058"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="1609"
                          width="200"
                          height="200"
                      >
                        <path
                            d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z"
                            p-id="1610"
                            fill="#175199"
                        ></path>
                        <path
                            d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z"
                            p-id="1611"
                            fill="#175199"
                        ></path>
                        <path
                            d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z"
                            p-id="1612"
                            fill="#175199"
                        ></path>
                      </svg>
                      修改
                    </button>
                  </div>
                </div>
              </div>
              <!--         社区简介     编辑模式           -->
              <div
                  style="padding-bottom: 20px"
                  v-bind:class="{ Field_edit: !SocietyIntroIsActive }"
              >
                <h3 class="Field-label-back">社区简介</h3>
                <div class="Field-content window-Field-content">
                  <input
                      class="Field-input"
                      @input="InputStander('introduce')"
                      v-model="per_info.introduce"
                  />
                  <div class="">
                    <input
                        :disabled="this.isIntroNull"
                        type="button"
                        value="保存"
                        class="button-save"
                        @click="saveName('introduce')"
                    />
                    <input
                        type="button"
                        value="取消"
                        class="button-cancel"
                        @click="cancel('introduce')"
                    />
                  </div>
                </div>
              </div>
            </form>
            <form @submit.native.prevent class="Field">
              <!--         标签    正常显示        -->
              <div
                  class="Field-inline"
                  v-bind:class="{ Field_edit: LabelIsActive }"
              >
                <input style="display: none" />
                <!--     标签   当没有信息时的显示     -->
                <div v-if="this.oldTags.length===0">
                  <h3 class="Field-label">标签</h3>
                  <button
                      type="button"
                      class="Edit-per-button First-edit"
                      @click="Editor('label')"
                  >
                    <svg
                        t="1626746074086"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2004"
                        width="200"
                        height="200"
                    >
                      <path
                          d="M562.873 99.366a31.976 31.976 0 0 1 27.132-9.044l276.973 39.567a31.976 31.976 0 0 1 27.133 27.133l39.567 276.973a31.976 31.976 0 0 1-9.044 27.132L461.127 924.635c-12.487 12.487-32.733 12.487-45.22 0L99.365 608.093c-12.487-12.487-12.487-32.733 0-45.22L562.873 99.366z m39.567 73.483L189.806 585.483l248.711 248.711L851.151 421.56l-31.088-217.623L602.44 172.85z m16.958 118.703c31.218-31.218 81.832-31.218 113.05 0 31.218 31.218 31.218 81.832 0 113.05-31.218 31.218-81.832 31.218-113.05 0-31.218-31.218-31.218-81.832 0-113.05z"
                          p-id="2005"
                          fill="#175199"
                      ></path>
                    </svg>
                    点击设置标签
                  </button>
                </div>
                <div style="display: inline-flex" v-else>
                  <h3 class="Field-label" >标签</h3>
                  <div class="Field-content ">
                    <div class="showLabel">
                      <tag
                          style="margin: 4px 4px 8px 2px; min-width: 44px"
                          v-for="(tag,index) in tagsChosen"
                          :key="tag+index"

                          @close="handleClose(tag)"
                      >{{ tag.labelName }}</tag>
                    </div>
                    <button
                        type="button"
                        class="change-button-label"
                        @click="Editor('label')"
                    >
                      <svg
                          t="1626594951058"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="1609"
                          width="200"
                          height="200"
                      >
                        <path
                            d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z"
                            p-id="1610"
                            fill="#175199"
                        ></path>
                        <path
                            d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z"
                            p-id="1611"
                            fill="#175199"
                        ></path>
                        <path
                            d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z"
                            p-id="1612"
                            fill="#175199"
                        ></path>
                      </svg>
                      修改
                    </button>
                  </div>
                </div>
              </div>
              <!--        标签      编辑模式           -->
              <div
                  style="padding-bottom: 20px"
                  v-bind:class="{ Field_edit: !LabelIsActive }"
              >
                <h3 class="Field-label-back " style="top: -66px;">标签</h3>
                <div class="Field-content " >
                  <div class="label-div">
                    <tag
                        style="margin: 4px 4px 8px 2px; min-width: 44px"
                        v-for="(tag,index) in tagsChosen"
                        :key="tag+index+1"
                        closable="true"
                        @close="handleClose(tag)"
                    >{{ tag.labelName }}</tag
                    >
                  </div>

                  <div class="tag">
                    <tag
                        v-for="(tag,index) in hotTags"
                        :key="tag+index"
                        :closable="false"
                        @handleChange="handleChange(tag)"
                        v-model="tag.checked"
                    >{{ tag.labelName}}</tag
                    >
                    <tag @handleChange="addTag" v-if="!addingTag">+</tag>
                    <cm-input-mini
                        :placeholder="'在此输入'"
                        @submit="submit"
                        v-if="addingTag"
                    ></cm-input-mini>
                    <tag @handleChange="randTags">换一换</tag>
                  </div>
                  <!--                  <input @input="InputStander('label')" class="Field-input " v-model="per_info.labels">-->
                  <!--                  <textarea class="Field-textarea"></textarea>-->
                  <div class="">
                    <input

                        type="button"
                        value="保存"
                        class="button-save"
                        @click="saveName('label')"
                    />
                    <input
                        type="button"
                        value="取消"
                        class="button-cancel"
                        @click="cancel('label')"
                    />
                  </div>
                </div>
              </div>
            </form>
            <!--      管理员查看      -->
            <form class="Field" style="height: 180px">
              <!--     管理员     正常显示        -->
              <div
                  class="Field-inline"
                  v-bind:class="{ Field_edit: ManageIsActive }"
              >
                <div>
                  <h3 class="Field-label" style="top: -35px">管理员</h3>
                  <div class="Field-manage-content">
                    <div style="display: flex">
                      <p class="">超级管理员 (1/1)</p>
                      <div style="display: flex">
                        <input class="The-manage" value="杨晗" type="button" />
                        <input
                            class="The-manage"
                            value="李俊龙"
                            type="button"
                        />
                      </div>
                    </div>
                    <div style="display: flex">
                      <p class="Field-manage">普通管理员 (5/1)</p>
                      <div style="display: flex">
                        <input class="The-manage" value="杨晗" type="button" />
                        <input
                            class="The-manage"
                            value="李俊龙"
                            type="button"
                        />
                      </div>
                    </div>

                    <!--                    <span class="Field-text">{{per_info.manage[0]}}</span>-->
                    <!--                    <button type="button" class="change-button " @click="Editor('manage')" >-->
                    <!--                      <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>-->
                    <!--                      修改-->
                    <!--                    </button>-->
                  </div>
                </div>
              </div>
              <!--        管理员     编辑模式           -->
              <!--              <div style="padding-bottom: 20px"  v-bind:class="{Field_edit:!ManageIsActive}">-->
              <!--                <h3 class="Field-label-back">管理员</h3>-->
              <!--                <div class="Field-content" >-->

              <!--                  <div class="">-->
              <!--                    <input  :disabled="this.isManageNull"  type="button" value="保存" class="button-save" @click="saveName('manage')">-->
              <!--                    <input type="button" value="取消" class="button-cancel" @click="cancel('manage')">-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </form>

          </div>
        </div>
      </div>

  </div>
</template>

<script>
import Tag from "../common/tag/tag.vue";
import CmInputMini from "../common/input/cm-input-mini.vue";
import {addTagsStatus} from "@/utils/utils";
export default {
  components: { Tag, CmInputMini },

  data() {
    return {
      checkNumber: 0,
      tags: [], //标签列表
      tags_back: [],//展示在输入框内以选中标签
      hotTags: [], //热门标签
      tagsChosen: [], //保存选中标签
      addingTag: false, //是否为添加标签状态
      oldTags: [], //编辑帖子时暂存老标签,checked为true即选中状态不发回后端处理，为false即未选中状态发回后端处理
      oldTagsCanceled: [], //取消掉的老标签
      conmmunityInfo:this.$store.getters.communityInfo,
      per_info: {
        societyName: "",
        introduce: "",
        labels: "",
        manage: [],
      },

      SocietyIsActive: false,
      SocietyLabelIsActive: false,
      SocietyIntroIsActive: false,
      ManageIsActive: false,
      LabelIsActive: false,
      isNameNull: true,
      isIntroNull: true,
      isManageNull: true,
      isLabelNull: true,
    };
  },
  created() {


    this.per_info.societyName=this.conmmunityInfo.communityName
    this.per_info.introduce=this.conmmunityInfo.communitySynopsis

    this.randTags();
    this.$getApi.findRelatedTags(this.conmmunityInfo.communityNo, 0).then((res) => {
      this.tagsChosen=addTagsStatus(res.data.labels,true)
      this.oldTags.push.apply(this.oldTags,this.tagsChosen)
      console.log('old',this.oldTags)

    });
  },
  methods: {
    postTags(postNo) {
      //为帖子添加标签
      let config = {
        headers: {
          "Content-Type": "application/json",
        },
        transformRequest: [
          function (data) {
            return JSON.stringify(data);
          },
        ],
      };
      console.log("为个人打标签");
      let tags = [];
      let tagsTemp = []
      let deleteIndex;
      let i = 0
      while ( i < this.tagsChosen.length) {
        console.log(i)
        // for (let j = 0; j < this.oldTags.length; j++) {
        if(this.tagCompare(this.tagsChosen[i],this.oldTags) == true)
            // if (this.tagsChosen[i].labelNo == this.oldTags[j].labelNo) {
        {deleteIndex = i;
          this.tagsChosen.splice(deleteIndex, 1);
          i = 0;
        }
        else{
          i++;
        }
        // }
        // }
      }
      tagsTemp.push.apply(tagsTemp, this.oldTagsCanceled);
      tagsTemp.push.apply(tagsTemp,this.tagsChosen)
      console.log("最终列表",tagsTemp)

      for (let i = 0; i < tagsTemp.length; i++) {
        console.log(tagsTemp[i]);
        let tag = {};
        tag.obNo = postNo;
        tag.labelNo = tagsTemp[i].labelNo;
        tag.obType = 0;
        tags.push(tag);
      }


      console.log(JSON.stringify(tags));
      this.$getApi.giveAndRemoveTags(tags, config);
    },
    randTags() {
      //获取随机标签列表
      const that = this;
      this.$getApi.getRandomTags().then((res) => {
        that.hotTags = addTagsStatus(res.data.labels.splice(0, 9),false);
        let tagschosen = that.tagsChosen;
        console.log("tagschosen", that.tagsChosen);
        that.hotTags.forEach((tag) => {
          tagschosen.forEach((chosedtag) => {
            if (tag.labelNo == chosedtag.labelNo) {
              console.log("对比tag相等");
              tag.checked = true;
            }
          });
        });
      });
    },
    tagCompare(tag, list) {
      //判断一个列表中是否包含某标签
      console.log("begin--tagCompare:", tag, list);
      for (let i = 0; i < list.length; i++) {
        if (tag.labelNo == list[i].labelNo) {
          console.log("tagCompare", true);
          return true;
        }
      }
      console.log("tagCompare", false);
      return false;
    },
    handleChange(tag) {
      //标签点击事件
      if (tag.checked == false) {
        console.log('选中标签')
        if (this.tagsChosen.length == 6) alert("最多选择6个标签");
        else {
          this.tagsChosen = [...this.tagsChosen, tag];
          tag.checked = true;
          for(let i=0;i<this.oldTagsCanceled.length;i++){
            if(tag.labelNo == this.oldTagsCanceled[i].labelNo){
              this.oldTagsCanceled.splice(i,1);
              console.log('删除oldtagcanceled项目')
              break;
            }
          }
        }
      } else {
        tag.checked = false;
        let deleteIndex;
        for (let i = 0; i < this.tagsChosen.length; i++) {
          if (this.tagsChosen[i].labelNo == tag.labelNo) deleteIndex = i;
        }

        if (
            this.tagCompare(this.tagsChosen[deleteIndex],this.oldTags) == true
        ) {
          this.oldTagsCanceled.push(this.tagsChosen[deleteIndex]);
        }
        this.tagsChosen.splice(deleteIndex, 1);
      }
    },
    handleClose(tag) {
      //标签关闭事件
      let deleteIndex = this.tagsChosen.indexOf(tag);
      let disableIndex = this.hotTags.indexOf(tag);
      this.tagsChosen.splice(deleteIndex, 1);
      for (let i = 0; i < this.hotTags.length; i++) {
        if (this.hotTags[i].labelNo == tag.labelNo) disableIndex = i;
      }
      if (this.tagCompare(this.hotTags[disableIndex],this.oldTags) == true) {
        this.oldTagsCanceled.push(this.hotTags[disableIndex]);
      }
      if (disableIndex != -1) this.hotTags[disableIndex].checked = false;
    },
    submit(value) {
      //提交标签
      if (this.tagsChosen.length < 6) {
        let tag = {
          labelName: value,
          checked: false,
        };
        console.log("创建标签", tag);
        this.addTag();
        const that = this;
        this.$getApi.addTag(value).then((res) => {
          if(that.tagCompare(res.data.label1,that.tagsChosen)==false)
          {
            for(let i=0;i<that.hotTags.length;i++){
              if(that.hotTags[i].labelNo == res.data.label1.labelNo){
                that.hotTags[i].checked = true
              }
            }
            that.tagsChosen = [...that.tagsChosen, res.data.label1];
          }
        });
      } else {
        alert("最多6个标签");
      }
    },
    addTag() {
      this.addingTag = !this.addingTag;

    },
    InputStander(name) {
      switch (name) {
        case "head":
          this.per_info.societyName === ""
              ? (this.isNameNull = true)
              : (this.isNameNull = false);
          break;
        case "introduce":
          this.per_info.introduce === ""
              ? (this.isIntroNull = true)
              : (this.isIntroNull = false);
          break;
        case "manage":
          this.per_info.manage === ""
              ? (this.isManageNull = true)
              : (this.isManageNull = false);
          break;
        case "label":
          this.per_info.labels === ""
              ? (this.isLabelNull = true)
              : (this.isLabelNull = false);
          break;
      }
    },
    Editor(name) {
      switch (name) {
        case "head":
          this.SocietyIsActive = !this.SocietyIsActive;
          break;
        case "introduce":
          this.SocietyIntroIsActive = !this.SocietyIntroIsActive;
          break;
        case "manage":
          this.ManageIsActive = !this.ManageIsActive;
          break;
        case "label":
          this.LabelIsActive = !this.LabelIsActive;
          break;
      }
    },
    saveName(name) {
      switch (name) {
        case "head":
          this.SocietyIsActive = !this.SocietyIsActive;
          this.conmmunityInfo.communityName = this.per_info.societyName;
          break;
        case "introduce":
          this.SocietyIntroIsActive = !this.SocietyIntroIsActive;
          this.conmmunityInfo.communitySynopsis=this.per_info.introduce
          break;
        // case "manage":
        //   this.ManageIsActive = !this.ManageIsActive;
        //   this.per_info_temp.manage = this.per_info.manage;
        //   break;
        case "label":this.LabelIsActive=!this.LabelIsActive;          break;
          // this.userInformation.detail.userPlace=this.per_info.labels;
      }

      if(name!=="label"){
        this.$store.commit("setCommunityInfo",this.conmmunityInfo)
        this.$getApi.updateCommunityInfo(this.conmmunityInfo.communityNo,this.conmmunityInfo.communityName,this.conmmunityInfo.communitySynopsis)
      }
      else {
        this.postTags(this.conmmunityInfo.communityNo)

      }



    },
    cancel(name) {
      switch (name) {
        case "head":
          this.SocietyIsActive = !this.SocietyIsActive;
          this.per_info.societyName = this.conmmunityInfo.communityName;
          break;
        case "introduce":
          this.SocietyIntroIsActive = !this.SocietyIntroIsActive;
          this.per_info.introduce = this.conmmunityInfo.communitySynopsis;
          break;
        // case "manage":
        //   this.ManageIsActive = !this.ManageIsActive;
        //   this.per_info.manage = this.conmmunityInfo.manage;
        //   break;
        case "label":this.LabelIsActive=!this.LabelIsActive;
          // this.per_info.labels=this.per_info_temp.labels;
          break;
      }
    },
  },
};
</script>

<style scoped>
.showLabel{
  overflow-y:hidden;
  word-wrap:break-word;
  overflow-x:auto;
  min-height: 30px;
  width: 398px;
}
.report-title{
  font-size: 20px;
  border-bottom: 1px solid rgb(240,240,240);
  padding: 15px;
}
.label-div {
  overflow-y:hidden;
  word-wrap:break-word;
  overflow-x:auto;
  min-height: 30px;
  width: 398px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.tag {
  width: 500px;
  margin-top: 10px;
}
.The-manage {
  margin-top: 24px;
  height: 21px;
  margin-left: 10px;
  border: 0;
  background: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
}
.The-manage:hover {
  margin-top: 24px;
  height: 21px;
  margin-left: 10px;
  border: 0;
  background: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.7;
}
.ProfileEdit {
  position: absolute;
  left: 25%;
  top: 10%;
  width: 1005px;
  height: 130%;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}
.Pro-Card {
  position: relative;
  width: 100%;
  height: 100%;
}
.ProfileHeader-header {
  position: relative;
  min-height: 240px;

  background-color: #dcdbdb;
}
.ProfileHeader-main {
  position: relative;
  margin: 0 20px 24px;
}

.ProfileHeader-content {
  padding-top: 16px;
  padding-left: 32px;

}
.ProfileHeader-contentHead {
  position: relative;
}
.ProfileHeader-title {
  margin: 0;
}
.Field-input {
  width: 398px;
  height: 24px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  display: flex;
  margin-top: 25px;
  margin-bottom: 10px;
}



.Field-input:focus {
  outline: none;
  border: 1px solid #8590a6;
}
.Field-inline {
  height: 95px;
  position: relative;
  top: 24px;
}
.Field-textarea {
  resize: none;
  width: 398px;
  height: 50px;
  max-width: 398px;
  max-height: 50px;
  margin-bottom: 10px;
  margin-top: 25px;
  font-size: 18px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
}
.Field-textarea:focus {
  outline: none;
  border: 1px solid #8590a6;
}
.Field_edit {
  display: none;
}
.FullNameField_editable {
  display: none;
}
.FullNameField_edit {
  display: none;
}
.change-button {
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
}
.Field-radio input {
  margin-bottom: 30px;
}

.change-button:hover {
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 1;
}
.change-button-label{
  position: absolute;

  left: 104%;
  top: 13%;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
}
.change-button-label:hover{
  position: absolute;

  left: 104%;
  top: 13%;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 1;

}
.Edit-per-button {
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
}
.Edit-per-button:hover {
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.7;
}
.ProfileEdit-fields {
  position: relative;
  padding-bottom: 100px;
  margin-top: 10px;
}
.Field {
  min-height: 30px;
  border-bottom: 1px solid #ebebeb;
}
.NameField-label {
  position: relative;
  left: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: style;
  line-height: 36px;
  color: #444;
  display: inline-block;
  margin-bottom: 60px;
}
.Field-label {
  position: relative;
  /*top:-50px;*/
  left: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: style;
  line-height: 36px;
  color: #444444;
  width: 60px;
  display: inline-block;
}
.Field-label-back {
  position: relative;
  width: 60px;
  top: -50px;
  left: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: style;
  line-height: 36px;
  color: #444;
  display: inline-block;
}
.Field-content {
  margin-top: 10px;
  margin-button: 10px;
  position: relative;
  left: 112px;
  display: inline-block;
  height: 94px;
}

.FieldName-input {
  margin-top: 12px;

  width: 398px;
  height: 24px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  display: flex;
}
.FieldName-input:focus {
  outline: none;
  border: 1px solid #8590a6;
}
.nameField-content {
  position: absolute;
  left: 22%;
  top: 5%;
}
.Field-text {
}
.Field-manage {
}
.Field-manage-content {
  /*margin-top: 10px;*/
  margin-button: 10px;
  position: relative;
  left: 68px;
  display: inline-block;
  line-height: 36px;
  /*height: 94px;*/
}
.button-cancel {
  font-size: 14px;
  color: #8590a6;
  background-color: #ffffff;
  cursor: pointer;
  padding: 0 16px;
  line-height: 32px;
  border-radius: 3px;
  outline: none;
  border: 1px solid #8590a6;
  margin-left: 18px;
}
.button-save {
  font-size: 14px;
  color: #fff;
  background-color: #06f;
  cursor: pointer;
  padding: 0 16px;
  line-height: 32px;
  border: 1px solid;
  border-radius: 3px;
  outline: none;
}
.First-edit {
  margin-left: 60px;
}
.First-edit:hover {
  margin-left: 60px;
}
.window-back{
  overflow: scroll;
  font-size: 15px;
  width: 800px;
  height: 600px;
}
.window-Field-content{
  left: 66px;
}
</style>
